<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	request.setAttribute("basePath", basePath);
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>服务器录入</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Access-Control-Allow-Origin" content="*">

<!-- css -->
<link href="${ctx}/css/skin/bootstrap-cerulean.css" rel="stylesheet"
	id="bs-css">

<link href="${ctx}/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="${ctx}/css/bootstrap-sortable.css" rel="stylesheet">
<link href="${ctx}/css/dynamic-page.css" rel="stylesheet">

<!-- external javascript
	================================================== -->
<!-- Placed at the end of the document so the pages load faster -->

<script src="${ctx}/js/jquery.min.js"></script>
<!-- 在dynamic-page.js中, 用到了jquery-ui的sortable拖曳特效 -->
<script src="${ctx}/js/jquery-ui.custom.min.js"></script>
<script src="${ctx}/js/bootstrap.min.js"></script>
<script src="${ctx}/js/dynamic-page.js"></script>
<script src="${ctx}/js/bootstrap-tooltip.js"></script>
<script src="${ctx}/js/bootstrap-popover.js"></script>

<script src="${ctx}/js/bootstrap-sortable.js"></script>

<style type="text/css">
.div-space {
	margin-left: 15px;
	margin-right: 15px;
}
</style>

<script type="text/javascript">
	var addServerInfo = function() {

		var data = $("#confForm").serializeArray();
		var url = '${ctx}/addServerInfo.do';
		$.ajax({
			type : "POST",
			url : url,
			data : data,
			async : true,
			cache : false,
			dataType : "json",
			success : function(result) {
				if (result['status'] == '0') {
					//$('#msg').html(data['message'] + "<br/>").show();
					alert(result['message']);
					document.getElementById("confForm").reset();
				} else {
					location.reload();
				}
	
			}
		});
	};

	var delServerInfo = function(id) {
		var url = '${ctx}/deleteServerInfo.do?id=' + id;
		$.ajax({
			type : "POST",
			url : url,
			async : true,
			cache : false,
			dataType : 'json',
			success : function(data) {
				location.reload();
			},
			error : function() {
				alert('删除服务器失败！');
			}
		});
	};
</script>
</head>

<body>
	<div class="row-fluid sortable">
		<!-- 切换皮肤需求引用 -->
		<input type="hidden" id="ctx" value="">

		<div class="box-content">
			<div class="box rp-table">
				<div class="box-header well">
					<h2>
						<i class="icon-edit"></i> <span id='tTitle'>添加服务器信息</span>
					</h2>
					<div class="box-icon">
						<a href="#" class="btn btn-close btn-round"><i
							class="icon-remove"></i></a>
					</div>
				</div>
				
				<div class="bs-docs-example">
					<form id="confForm" class="form-horizontal">
						<legend>&nbsp;</legend>
						<div class="control-group">
							<label class="control-label" for="realtimeComputingGroup">组代号</label>
							<div class="controls">
								<input type="text" id="realtimeComputingGroup" name="realtimeComputingGroup"
									placeholder="所分配组"> <span class="required"><font
									color="#FF0000">*</font></span>
							</div>
						</div>
						
						<div class="control-group">
							<label class="control-label" for="ip">服务器ip</label>
							<div class="controls">
								<input type="text" id="ip" name="ip"
									placeholder="服务器ip"><span class="required"><font
									color="#FF0000">*</font></span>
							</div>
						</div>
						
						<div class="control-group">
							<div class="controls">
								<input type="button" value="提交" onclick="addServerInfo()">
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		
		<div class="box-content">
			<div class="box rp-table">
				<div class="box-header well">
					<h2>
						<i class="icon-info-sign"></i> <span id='tTitle'>服务器信息</span>
					</h2>
					<div class="box-icon">
						<a href="#" class="btn btn-close btn-round"><i
							class="icon-remove"></i></a>
					</div>
				</div>
				<div class="box-content">
					<table id="confTable"
						class="table table-striped table-bordered table-hover table-condensed  scrolltable sortable">
						<thead>
							<tr>
								<th>序号</th>
								<th>bloomfilter组</th>
								<th>服务器ip</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${serverInfoList}" var="serverinfo" varStatus="index">
								<tr>
									<td>${serverinfo.id}</td>
									<td>${serverinfo.realtimeComputingGroup}</td>
									<td>${serverinfo.ip}</td>
									<td>
										<a style="cursor: pointer" href="javascript:void(0)" onclick="dodel('${serverinfo.id}')" role="button" data-toggle="modal">删除</a> 
									</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
		</div>

		<div id="delModal" class="modal hide fade" tabindex="-1" role="dialog"
			aria-labelledby="modalLabel" aria-hidden="true">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">×</button>
				<h3 id="modalLabel">服务器删除</h3>
			</div>
			<div class="modal-body">
				<p>删除服务器后不能恢复，是否确认删除？</p>
			</div>
			<div class="modal-footer">
				<button id="close" class="btn" data-dismiss="modal"
					aria-hidden="true">关闭</button>
				<button id="sure_commit" class="btn btn-primary"
					data-dismiss="modal" aria-hidden="true">确定</button>
			</div>
		</div>
		<script type="text/javascript">
			function dodel(id) {
				$('#delModal').modal('show').on('shown', function() {
					$('#sure_commit').on('click', function() {
						delServerInfo(id);
					});
				});
			};
		</script>

		<div class="box-content">
			<div class="box rp-table">
				<div class="box-header well">
					<h2>
						<i class=" icon-question-sign"></i> <span id='tTitle'>帮助</span>
					</h2>
					<div class="box-icon">
						<a href="#" class="btn btn-close btn-round"><i
							class="icon-remove"></i></a>
					</div>
				</div>
				<div class="box-content">
					<span>组代号：表示所属组，此代号必须唯一</span>
					<p>
					<span>服务器IP：组拥有的服务器</span>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
